<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- react核心库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<!-- 支持react操作DOM -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<!-- 引入Babel，用于将JSX转换为JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<!-- prop-types -->
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>

</head>
<body>
<div id="test"></div>
<script type="text/babel"> 
    class Login extends React.Component{
       
        handleSubmit = (e)=>{
            e.preventDefault()//阻止表单提交
            const {username,password} = this
            {/*表单中所有输入类的dom值都是现用现区的，就是非受控组件*/}
            alert(`用户名：${username.value} 密码：${password.value}`)
        }

        render(){
            return(
                <form onSubmit={this.handleSubmit}>
                    用户名 ： <input ref = {c => this.username = c} type="text" name="username"/>
                    密码 ： <input ref = {c => this.password = c} type="password" name="password"/>
                    <button>登陆</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>